<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.Ok{
				color: green;
			}
			.NoOk{
				color: red;
			}
		</style>
	</head>
	<body>
		名字:<input type="text" id="name" onblur="checkName()" />
		<span id="spanName">5-10位的字母数字下划线 </span>

		<br />
		邮箱:<input type="text" id="email" onblur="checkEmail()" />
		<span id="spanEmail">必须符合邮箱格式 </span>

		<script type="text/javascript">
			function checkName() {

				//获取name框内的值
				var name = document.getElementById("name").value;
				//选中spanName
				var spanName = document.getElementById("spanName");
				var reg = /^[a-zA-Z0-9_]{5,9}$/;
				if (name.match(reg)) {
					spanName.className = "Ok";
				} else {
					spanName.className = "NoOk";
				}


			}

			function checkEmail() {
				var email = document.getElementById("email").value;
				var spanEmail = document.getElementById("spanEmail");

				var reg = /^[a-zA-Z0-9]+@[0-9a-zA-Z]+\.com$/;
				if (email.match(reg)) {
					spanEmail.className = "Ok";
				} else {
					spanEmail.className = "NoOk";
				}
			}
		</script>
	</body>
</html>
